<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet"  href="/css/bootstrap.min.css">
  <script src="/js/jquery-3.6.1.min.js"></script>
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
</head>
<body >

<div class="container">
  <div class="row">
    <div class="col">
      <h5>
        这是模板
      </h5>
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
        新增学生
      </button>
      <br>
      <br>
      <form class="form-inline">
        <div class="form-group">
          <label for="searchName">请输入名字</label>
          <input type="text" class="form-control" id="searchName" placeholder="请输入名称" name="searchName">
        </div>
        <button type="button" class="btn btn-default btn-primary" onclick="search();">查询</button>
      </form>
<br><br><br>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

              <h4 class="modal-title" id="myModalLabel">学生详细信息</h4>
            </div>
            <div class="modal-body">

              <form id="teacherform">

                <input hidden="hidden" id="id" name="id"/>

                <div class="form-group">
                  <label for="no">学号</label>
                  <input type="text" class="form-control" id="no" name="no" placeholder="学号">
                </div>
                <div class="form-group">
                  <label for="name">姓名</label>
                  <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                </div>
                <div class="form-group">
                  <label for="age">成绩</label>
                  <input type="text" class="form-control" id="age" name="age" placeholder="成绩">
                </div>
                <div class="form-group">
                  <label for="sex">性别</label>
                  <select class="form-control" id="sex" name="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                  </select>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" onclick="addTeacher()">保存</button>
            </div>
          </div>
        </div>
      </div>
      <!--<br><br>请输入查询姓名:<input type="text" class="tj" ><button class="cx">查询</button>-->

      <table class="table" id="teaTable" >
      </table>
    </div>
  </div>
</div>
<!-- Modal -->



<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>

<script type="text/javascript">

  function preAdd(){
    $("#id").var(0);//提示新增
  }

  function  editTeacher(id){
    $('#myModal').modal('hide')
    $.ajax({
      url:'/webapi/teacher/get/'+id
    }).done(function (rs){
      $("#id").val(rs.id);
      $("#no").val(rs.no);
      $("#name").val(rs.name);
      $("#age").val(rs.age);
      $("#sex").val(rs.sex);
      $('#myModal').modal('show');
    })

  }

  function addTeacher(){
    var data=$("#teacherform").serialize();

    var id=$("#id").val();
    if(id<1){
      $.ajax({
        url:"/webapi/teacher/insert",
        method:"post",
        data:data
      }).done(function (){

        loadTable();
        $('#myModal').modal('hide')
      })
    }else{
      $.ajax({
        url:"/webapi/teacher/update",
        method:"put",
        data:data
      }).done(function (){

        loadTable();
        $('#myModal').modal('hide')
      })
    }
  }

  function search(){
    $('#teaTable').bootstrapTable("destroy");
    loadTable();
  }
  function loadTable() {
    $('#teaTable').bootstrapTable({
      url: '/webapi/teacher/getbypage',
      striped: true,
      pagination: true,
      singleSelect: false,
      pageSize: 3,
      pageNumber: 1,
      sidePagination: "server",
      queryParams: function (params) {
        var paraObj;
        paraObj = {
          pageSize: params.limit,
          pageIndex: params.offset/params.limit,
          sort: "id",
          direct: "desc",
          name:$("#searchName").val()
        };
        //
        // if (options.listParamsBefore) {
        //   options.listParamsBefore(paraObj);
        // }
        return paraObj;
      },
      columns: [{
        field: 'id',
        title: '序号'
      }, {
        field: 'name',
        title: '姓名'
      }, {
        field: 'sex',
        title: '性别'
      }, {
        field: 'age',
        title: '年龄'
      },]
    })
  }//end

    function deleteTeacher(id) {
      if (confirm("你是否真的要删除吗？别后悔哦？")) {
        $.ajax({
          url: "/webapi/teacher/delete/" + id,
          method: "delete"
        }).done(function () {
          loadTable();
        });

      }
    }

    $(function () {
      loadTable();
    });
    //条件查询，将查询到的对象赋红色-->
    //按钮触发事件-->
    // $(".cx").click(function () {
    //   //获取输入的条件-->
    //   var data = $(".tj").val()
    //   //查询条件为空时，网页提示“请输入查询的姓名！！！”
    //   if (data == 0) {
    //     alert("请输入查询的姓名！！！")
    //   }
    //   //非空时，将所查询到的赋红色-->
    //   else {
    //     $(".table tr:not(:first):contains(" + data + ")").css("background", "#FF0033")
    //   }
    // })
</script>






</body>

</html>